<template>
    <BasicModal
        v-bind="$attrs"
        title="新增分类"
        width="700px"
        okText="新增"
        @register="register"
        @cancel="cancelFn"
        @ok="okFn"
    >
        <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
            <a-form-item label="分类名称">
                <a-input placeholder="请输入分类名称" v-model:value="form.name" />
            </a-form-item>
        </a-form>
    </BasicModal>
</template>

<script lang="ts">
    import { defineComponent, reactive, onUpdated, toRaw } from 'vue'
    import { BasicModal, useModalInner } from '/@/components/Modal'
    import { AEParams } from '/@/api/category/model'
    import { message, Modal } from 'ant-design-vue'
    import { addApi } from '/@/api/category'

    export default defineComponent({
        components: { BasicModal, Modal },
        setup(props, context) {
            /**
             * 响应式数据
             */

            console.log(props)
            // 表单
            const form = reactive({
                name: '',
            })

            // 定义响应式表单提交数据
            const formData: AEParams = reactive({
                name: '',
            })

            // 初始化表格信息
            onUpdated(() => {
                if (getVisible) {
                }
            })

            // 弹窗管理
            const [register, { closeModal, getVisible, changeLoading }] = useModalInner()
            const cancelFn = () => {
                closeModal()
            }

            /*
             * 响应事件
             */

            // 确认
            const okFn = async () => {
                try {
                    const info = toRaw(form)
                    changeLoading(true)
                    const res = await addApi(info)
                    console.log(res)
                    changeLoading(false)
                    // 更新成功
                    message.success('添加成功!')
                    context.emit('updateData')
                    closeModal()
                } catch (err) {
                    changeLoading(false)
                    console.log(err)
                }
            }

            return {
                register,
                cancelFn,
                okFn,
                form,
                formData,
            }
        },
    })
</script>

<style></style>
